<!-- Horizontal Form -->
 <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">添加菜单</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">类型</label>
            <div class="col-sm-10 typeRadio">
              	<label class="radio-inline">
				<input type="radio" name="typeId" value="1" checked> 菜单 </label>
				<label class="radio-inline">
				<input type="radio" name="typeId" value="2"> 按钮 </label>
            </div>
          </div>
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">菜单名称</label>
            <div class="col-sm-10">
              <input type="text" class="form-control"  id="nameId" placeholder="名称">
            </div>
          </div>
          <div class="form-group">
            <label for="parentId" class="col-sm-2 control-label">上级菜单</label>
            <div class="col-sm-10">
              <input type="text" class="form-control load-sys-menu" readonly="readonly" id="parentId" placeholder="上级菜单">
            </div>
          </div>
          <div class="form-group">
            <label for="urlId" class="col-sm-2 control-label">菜单URL</label>
            <div class="col-sm-10">
              <input type="text" class="form-control"  id="urlId" placeholder="url">
            </div>
          </div>
          <div class="form-group">
			<label for="permissionId" class="col-sm-2 control-label">授权标识：</label>
			<div class="col-sm-10">
				<input type="text" id="permissionId"
				       placeholder="多个用逗号分隔，如：user:list,user:create"
					   class="form-control">
			</div>
		  </div>
		  <div class="form-group">
				<label for="sortId" class="col-sm-2 control-label">排序号：</label>
				<div class="col-sm-10">
					<input type="text" id="sortId" placeholder="排序号"
						class="form-control">
				</div>
		 </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <button type="button" class="btn btn-default btn-cancel">Cancel</button>
          <button type="button" class="btn btn-info pull-right btn-save">Save</button>
        </div>
        <!-- /.box-footer -->
      </form>
      <!-- zTree 对应的div -->
      <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="menuLayer" type="page" times="2" showtime="0" contype="object"
		style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
		<div class="layui-layer-title" style="cursor: move;">选择菜单</div>
		<div class="layui-layer-content" style="height: 358px;">
			<div style="padding: 10px;" class="layui-layer-wrap">
				<ul id="menuTree" class="ztree"></ul>    <!-- 动态加载树 -->
			</div>
		</div>
		<span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>
		<div class="layui-layer-btn layui-layer-btn-">
			<a class="layui-layer-btn0 btn-confirm">确定</a>
			<a class="layui-layer-btn1 btn-cancel">取消</a>
	     </div>
      </div>
  </div>
  <script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
  <script type="text/javascript" src="bower_components/layer/layer.js">
  </script>
  <script type="text/javascript">
     var zTree;
     var setting = {
         data: {
             simpleData: {
                 enable: true,
                 idKey: "id",
                 pIdKey: "parentId",
                 rootPId: 0
             }
         }
     };
     $(function(){
        $(".load-sys-menu").click(function(){
            doLoadZTreeNodes()
        });
        //zTree cancel按钮事件注册
        $(".btn-cancel").click(doCancel);
        //zTree确定按钮事件注册
        $(".btn-confirm").click(doSetSelectNode);
        //保存按钮事件注册
        $(".box-footer").on("click",".btn-save,.btn-update",doSaveOrUpdate);
        $(".box-footer").on("click",".btn-cancel",doCancel)
        //获取#mainContentId位置绑定的数据
         let rowData=$("#mainContentId").data("rowData");
         if(rowData){//rowData有值则执行页面数据初始化
            doInitEditFormData(rowData);
         }
     })
     function doCancel(){
         //移除使用data函数绑定的数据
         $("#mainContentId").removeData();
         $("#mainContentId").load("/menu/menu_list");
     }
     function doInitEditFormData(rowData){
        // debugger
         $("#nameId").val(rowData.name);
         $("#parentId").data("parentId",rowData.parentId);
         $("#parentId").val(rowData.parentName);
         $("#permissionId").val(rowData.permission);
         $("#urlId").val(rowData.url);
         $("#sortId").val(rowData.sort);
         $(`input[value=${rowData.type}]`).prop("checked",true);
     }
     function doGetEditFormData(){
         return {
             name:$("#nameId").val(),
             parentId: $("#parentId").data("parentId"),
             url:$("#urlId").val(),
             permission:$("#permissionId").val(),
             type:$("input[name=typeId]:checked").val(),
             sort:$("#sortId").val()
         };
     }
     function doSaveOrUpdate(){
         //1.获取表单数据
         let params=doGetEditFormData();
         //2.校验表单数据
         //3.异步提交表单数据到服务端
         let insertUrl="/menu/doSaveObject";
         let updateUrl="/menu/doUpdateObject";
         let rowData=$("#mainContentId").data("rowData");
         if(rowData)params.id=rowData.id;//修改记录是要基于id进行修改
         let url=rowData?updateUrl:insertUrl;
         $.post(url,params,function(result){
             if(result.state==1){
                 alert(result.message);
                 doCancel();
             }else{
                 alert(result.message);
             }
         })
     }
     function doSetSelectNode(){
        let nodes=zTree.getSelectedNodes();
        if(nodes.length==0){
            alert("请先选择");
            return;
        }
        //val函数为jquery中为表单赋值或取值的一个函数
        //val() 取值
        //val(100) 赋值
        $("#parentId").val(nodes[0].name);
        //data函数为jquery中的一个js数据绑定函数，其语法为
        //data(key[,value]),假如只有key表示取值
        $("#parentId").data("parentId",nodes[0].id);
         doHideZTree();
     }
     function doHideZTree(){
         $("#menuLayer").css("display","none");//隐藏div
     }
     function doLoadZTreeNodes(){
         let url="/menu/doFindZtreeMenuNodes";
         $.getJSON(url,function(result){
             zTree=$.fn.zTree.init($("#menuTree"),setting,result.data);
             $("#menuLayer").css("display","block");//block表示要显示
         })
     }

  </script>
    
    
    
    
    
    
    
    
    